<template>
    <div>
        <div class="container">
            <el-table :data="userInfo"
            border 
            class="table"
            ref="tableRef"
            header-cell-class-name="table-header">
            <el-table-column prop="user_id" label="用户ID"></el-table-column>
            <el-table-column prop="college" label="学院"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-switch
                    v-model="scope.row.enable"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @click.native="change(scope.row)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    :disabled="scope.row.enable ==0?true:false"
                    @click="showDialog(scope.row)">编辑</el-button>

                    <el-dialog title="修改当前内容" :visible.sync="editUserChange">
                        <el-form :model="form" ref="form">
                          <el-form-item label="学院">
                              <el-input v-model="form.college" placeholder="输入该用户当前所在学院"></el-input>
                          </el-form-item>
                          <el-form-item label="姓名">
                              <el-input v-model="form.name" placeholder="输入修改后的姓名"></el-input>
                          </el-form-item>
                        </el-form>
                        <div slot="footer">
                            <el-button type="primary" @click.native="handleUpdate(scope.row,scope.$index,'form')">保存</el-button>
                            <el-button @click="editUserChange = false">取消</el-button>
                        </div>
                    </el-dialog>
                </template>
            </el-table-column>
  
            </el-table>
            <el-button class="insertUser" type="primary" round @click="insertNewUser = true">添加用户</el-button>
                <el-dialog title="新增用户" :visible.sync="insertNewUser">
                    <el-form :model="form1" ref="form1">
                        <el-form-item label="用户id">
                            <el-input v-model="form1.id" placeholder="输入用户id"></el-input>
                        </el-form-item>
                        <el-form-item label="学院">
                            <el-input v-model="form1.college" placeholder="输入用户所在学院"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="form1.name" placeholder="输入用户姓名"></el-input>
                        </el-form-item>                  
                    </el-form>
                    <div slot="footer">
                        <el-button type="primary" @click.native="insertUser()">保存</el-button>
                        <el-button @click="insertNewUser = false">取消</el-button>
                    </div>
                </el-dialog>
        </div>
    </div>
</template>
<script>
import userChange from '@/api/userChange'
import moment from 'moment'

export default {
    name: 'userChange',
    data() {
        return {
            name:'',
            userInfo:[],
            editUserChange:false,
            insertNewUser:false,
            form: {
                college:null,
                name:null
            },
            form1:{
                id:'',
                college:null,
                name:null
            },
            rowNow:[]
        }
    },
    created() {
        this.getUserChange();
    },
    methods: {
        getUserChange() {
            userChange.getUserChange()
            .then(response=>{
                this.userInfo = response.data;
                var userInfoDetailList = [];
                if (this.userInfo){
                    this.userInfo.forEach(u=>{
                        var detail={
                            user_id:u.user_name,
                            college:u.college,
                            name:u.name,
                            enable:u.enable
                        }
                    userInfoDetailList.push(detail);
                    })
                    this.userInfo=userInfoDetailList;
                
                }

            })
        },
        getUnRegisterUserByName() {
            if (this.name === '') {
                this.getUserUnregistered();
            } else {
                unRegister.getUnRegisterUserByName(this.name)
                .then(response=>{
                    this.userInfo = response.data;
                    var userInfoDetailList = [];
                    if (this.userInfo){
                        this.userInfo.forEach(u=>{
                            var detail={
                            user_id:u.user_id,
                            college:u.college,
                            name:u.name,
                            unRegister:u.unRegister,
                            time:moment(u.time).format('YYYY年MM月DD日 HH:mm'),
                            }
                        userInfoDetailList.push(detail);
                        })
                        this.userInfo=userInfoDetailList;
                    }
                })
            }

        },
        change(row) {
            const data = {
                id:row.user_id,
                enable:row.enable
            };
            userChange.changeEnable(data.id,data.enable)
            .then(response=> {
                var msg = response.status;
                if (msg === 200) {
                    this.getUserChange();
                } else {
                    this.$message({
                        message:'操作失败',
                        center:true,
                        type:'error'
                    })
                }
            })

        },
        showDialog(row){
            this.editUserChange = true
            this.rowNow = row
        },
        handleUpdate(){
            
            const data = {
                id:this.rowNow.user_id,
                college:this.form.college,
                name:this.form.name

            }
            userChange.editUserChangeInfo(data.id,data.college,data.name)
            .then(response=> {
                var msg = response.status;
                if (msg === 200) {
                    this.getUserChange();
                } else {
                    this.$message({
                        message:'操作失败',
                        center:true,
                        type:'error'
                    })
                }
            })
            this.editUserChange = false;
        },
        insertUser(){
            const data = {
                id:this.form1.id,
                college:this.form1.college,
                name:this.form1.name
            }
            userChange.insertUser(data.id,data.college,data.name)
            .then(response=>{
                var msg = response.status;
                if (msg === 200) {
                    this.getUserChange();
                } else {
                    this.$message({
                        message:'操作失败',
                        center:true,
                        type:'error'
                    })
                }
            })
            this.insertNewUser = false
        }
        
    }
}
</script>
<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.table{
    width: 100%;
    font-size: 14px;
}
.insertUser {

    display: block;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
</style>